/*
 * @description 视觉
 */
@import '../setting/scssVariable.scss';
@import '../mixins/index.scss';

/****************************** 一.背景色 ******************************/

// 命名规则：bg-数值
// 示例：bg-1 -> background-color: var(--aoda-color1);
@for $i from 1 through $atomic-color {
  [bg-#{$i}] {
    background-color: var(--aoda-color#{$i});
  }
}

/****************************** 二.边框色 ******************************/

// 命名规则：{ba、bt、bb}-数值
// 示例：bb-1 -> border-bottom: 1px solid var(--aoda-color1);
@for $i from 1 through $atomic-color {
  [ba-#{$i}] {
    border: 1px solid var(--aoda-color#{$i});
  }

  [bt-#{$i}] {
    border-top: 1px solid var(--aoda-color#{$i});
  }

  [bb-#{$i}] {
    border-bottom: 1px solid var(--aoda-color#{$i});
  }
}

/****************************** 三.阴影色 ******************************/

// 命名规则：bs-数值
// 示例：bs-1 -> box-shadow: 0 10px 15px 1px var(--aoda-color1);
@for $i from 1 through $atomic-color {
  [bs-#{$i}] {
    box-shadow: 0 10px 15px 1px var(--aoda-color#{$i});
  }
}

/****************************** 四.不透明度 ******************************/

// 命名规则：op-数值
// 示例：op-1 -> opacity: 0.1;
@each $key, $value in $atomic-opacity {
  [op-#{$key}] {
    opacity: $value;
  }
}

/****************************** 五.边框倒角 ******************************/

// 命名规则：br-数值
// 示例：br-5 -> border-radius: 5px;
@for $i from 0 through $atomic-border {
  [br-#{$i}] {
    border-radius: #{$i}px;
  }
}

[br-c] {
  border-radius: 50%;
}

/****************************** 六.可见性 ******************************/

// 命名规则：vi-类型
// 示例：vi-h -> visibility: hidden;
@each $key, $value in $atomic-visibility {
  [vi-#{$key}] {
    visibility: $value;
  }
}

/****************************** 七.鼠标行为 ******************************/

// 命名规则：cu-类型
// 示例：cu-p -> cursor: pointer;
[cu-p] {
  @include cursor;
}

/****************************** 八.img图片适配 ******************************/

// 命名规则：of-类型
// 示例：of-cr -> object-fit: cover;
@each $key, $value in $atomic-object-fit {
  [of-#{$key}] {
    @include img-fit($value);
  }
}
